<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片修改透明边距</title>
    <style>
      body {
        text-align: center;
      }
      .main {
        display: inline-block;
        text-align: left;
      }
      #myCanvas {
        width: 256px;
        height: 256px;
        object-fit: contain;
        outline: 1px solid #ccc;
      }
    </style>
</head>
<body>
    <div class="main">
      <canvas id="myCanvas" width="400" height="400"></canvas>
      <br>
      左边距：<input type="number" placeholder="10" onchange="margin.left = Number(this.value);drawImage(IMAGE)">&nbsp;px
      <br>
      上边距：<input type="number" placeholder="10" onchange="margin.top = Number(this.value);drawImage(IMAGE)">&nbsp;px
      <br>
      右边距：<input type="number" placeholder="10" onchange="margin.right = Number(this.value);drawImage(IMAGE)">&nbsp;px
      <br>
      下边距：<input type="number" placeholder="10" onchange="margin.bottom = Number(this.value);drawImage(IMAGE)">&nbsp;px
      <br>
      <input type="file" id="imageUpload" accept="image/*" />
      <br>
      <button id="downloadButton">下载PNG</button>
    </div>

    <script>
        // 获取Canvas元素
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 定义边距对象
        const margin = {
          left: 10,
          top: 10,
          right: 10,
          bottom: 10
        };
        let IMAGE = null;

        // 获取文件上传输入框
        const imageUpload = document.getElementById('imageUpload');
        // 监听文件上传事件
        imageUpload.addEventListener('change', function(event) {
            // 获取用户选择的文件
            const file = event.target.files[0];

            // 检查是否选择了文件
            if (!file) {
                alert('未选择文件！');
                return;
            }

            // 检查文件类型是否为图片
            if (!file.type.startsWith('image/')) {
                alert('请选择图片文件！');
                return;
            }

            // 使用FileReader读取图片文件
            const reader = new FileReader();
            reader.onload = function(e) {
                // 创建一个Image对象
                const image = new Image();
                IMAGE = image;

                // 设置图片加载完成后的回调函数
                image.onload = function() {
                  drawImage(image)
                };

                // 设置图片的源为FileReader读取的结果
                image.src = e.target.result;
            };

            // 读取文件内容为DataURL
            reader.readAsDataURL(file);
        });

        // 绘制图片到Canvas上的函数
        function drawImage(image) {
          if (!image) {
            return
          }
          // 计算新的Canvas宽度和高度
          const canvasWidth = image.width + margin.left + margin.right
          const canvasHeight = image.height + margin.top + margin.bottom
          canvas.width = canvasWidth
          canvas.height = canvasHeight
          console.log(canvasWidth, canvasHeight)
          console.log(image.width, image.height)
          console.log(margin)
          // 清空Canvas
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          // 绘制图片到Canvas上
          ctx.drawImage(image, margin.left, margin.top, image.width, image.height);
        }

        // 添加按钮点击事件
        document.getElementById('downloadButton').addEventListener('click', function() {
            if (!IMAGE) {
              alert('请先选择图片！')
              return
            }
            drawImage(IMAGE)

            // 将Canvas内容转换为PNG数据URL
            const dataURL = canvas.toDataURL('image/png');

            // 创建一个a元素用于下载
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'canvas_image.png'; // 设置下载文件名
            document.body.appendChild(link);

            // 模拟点击a元素以触发下载
            link.click();

            // 清理
            document.body.removeChild(link);
        });
    </script>
</body>
</html>